<!-- eslint-disable prettier/prettier -->
<template>
  <el-card shadow="never" class="!border-none">
    <el-form :model="formData" inline>
      <el-form-item label="订单编号">
        <el-input
          class="ls-input"
          v-model="formData.sn"
          placeholder="请输入订单编号"
        />
      </el-form-item>
      <el-form-item label="用户信息">
        <el-input
          class="ls-input"
          v-model="formData.userInfo"
          placeholder="请输入用户信息"
        />
      </el-form-item>
      <el-form-item label="服务名称">
        <el-input
          class="ls-input"
          v-model="formData.goodsName"
          placeholder="请输入服务名称"
        />
      </el-form-item>

      <el-form-item label="下单时间">
        <data-picker
          class="ls-input"
          style="width: 280px"
          v-model:startTime="formData.orderTimeStart"
          v-model:endTime="formData.orderTimeEnd"
        ></data-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetPage">查询</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card shadow="never" class="mt-4 !border-none">
    <div class="mt-4">
      <el-table
        ref="tableData"
        size="large"
        :data="pager.lists"
        v-loading="pager.loading"
      >
        <el-table-column property="sn" label="订单编号" min-width="200" />
        <el-table-column label="用户信息" min-width="120">
          <template #default="scope">
            <el-popover placement="top-start" width="200px" trigger="hover">
              <div class="flex">
                <span class="flex-none mr-2">头像：</span>
                <el-image
                  :src="scope.row.avatar"
                  style="width: 40px; height: 40px; border-radius: 50%"
                />
              </div>
              <div class="flex mt-2">
                <span class="flex-none mr-2">昵称：</span>
                <span>{{ scope.row.nickname }}</span>
              </div>
              <template #reference>
                <router-link
                  :to="`/user/userList/detail?id=${scope.row.userId}`"
                >
                  <div class="pointer normal">
                    {{ scope.row.nickname }}
                  </div>
                </router-link>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="服务名称" min-width="260">
          <template #default="{ row }">
            <div class="flex items-center goods-box">
              <div class="w-[60px] h-[60px]">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="row.goodsImage"
                  :preview-src-list="[row.goodsImage]"
                  :hide-on-click-modal="true"
                  :preview-teleported="true"
                  :fit="'contain'"
                />
              </div>
              <router-link
                :to="`/service/lists/edit?id=${row.goodsId}`"
                class="ml-2 xs"
              >
                <div class="goods-name">{{ row.goodsName }}</div>
                <div class="form-tips">
                  {{ row.goodsPrice }} {{ row.unitName }}
                </div>
              </router-link>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="实付金额" min-width="100">
          <template #default="scope"> ¥{{ scope.row.orderAmount }} </template>
        </el-table-column>

        <el-table-column property="contact" label="联系人" min-width="100" />
        <el-table-column label="订单状态" min-width="100">
          <template v-slot="{ row }">
            <span>{{
              row.orderStatus == "2"
                ? "服务中"
                : row.orderStatus == "3"
                ? "已完成"
                : ""
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="140" fixed="right">
          <template #default="scope">
            <router-link
              v-perms="['order:detail']"
              class="mr-2"
              :to="{
                path: 'yearlyPackage/detail',
                query: {
                  id: scope.row.id,
                },
              }"
            >
              <el-link type="primary" :underline="false">详情</el-link>
            </router-link>
            <!-- 操作 -->
            <operation
              btnStyle="text"
              :id="scope.row.id"
              :verificationCode="scope.row.verificationCode"
              :cancelBtn="scope.row.cancelBtn"
              :deleteBtn="scope.row.deleteBtn"
              :verificationBtn="scope.row.verificationBtn"
              :orderRemarks="scope.row.orderRemarks"
              @refresh="resetPage"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-end mt-4">
      <pagination v-model="pager" @change="getLists" />
    </div>
  </el-card>
  <edit-popup
    v-if="showEdit"
    ref="editRef"
    @success="getLists"
    @close="showEdit = false"
    :serviceList="serviceList"
  />
</template>

<script lang="ts" setup>
import { apiyearlyPackage, apiOrderStatis } from "@/api/order/lists";
import { reactive } from "vue";
import { OrderMode } from "@/enums/modeEnum";
import Operation from "./components/operation.vue";
import Pagination from "@/components/pagination/index.vue";
import DataPicker from "@/components/daterange-picker/index.vue";
import { usePaging } from "@/hooks/usePaging";
import { timeFormat } from "@/utils/util";

interface formDataObj {
  sn: string; //否	string	订单编号
  userInfo: string; //否	string	用户信息
  goodsName: string; //否	string	服务名称
  payStatus: string | number; //否	int	支付状态;0-待支付;1-已支付;
  orderTimeStart: string; //否	string	开始时间
  orderTimeEnd: string; //否	string	结束时间
  orderStatus: string | number; //否	int	订单状态;0-待支付;1-预约中;2-服务中;3-已完成;4-已关闭
  staffInfo: string; // 否 师傅信息
  isDispatch: string | number; // 否 int 派单状态;0-委派单;1-已派单
  orderType: number;
}

const orderMode: any = reactive<any>(OrderMode);
const formData = reactive<formDataObj>({
  sn: "",
  userInfo: "",
  goodsName: "",
  payStatus: "",
  orderTimeStart: "",
  orderTimeEnd: "",
  orderStatus: "",
  staffInfo: "",
  isDispatch: "",
  orderType: 2,
});

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: apiyearlyPackage,
  params: formData,
});

const countData = ref<any>({});
const getOrderAmount = async () => {
  countData.value = await apiOrderStatis("");
};

getLists();
getOrderAmount();
</script>

<style lang="scss" scoped>
:deep() .el-tabs__content {
  padding: 0;
}
.ls-input {
  width: 280px;
}

.error {
  color: #db2828;
}

.goods-box {
  .goods-name {
    color: #333333;
  }
}

.goods-box:hover {
  .goods-name {
    color: #4a5dff;
    text-decoration: underline;
  }
}
a {
  text-decoration: none !important; //去掉原有链接文字下划线
}
.el-tabs__nav-wrap::after {
  height: 1px !important;
}
</style>
 
<style lang="scss">
.el-table--border .el-table__inner-wrapper::after,
.el-table--border::after,
.el-table--border::before,
.el-table__inner-wrapper::before {
  z-index: 1 !important;
}
</style>